<!--
 @description 自定义页面
 @fileName index.vue
 @author zengqiongying
 @created 2022/12/28 13:24:51
-->
<template>
  <div class="custom-page">
    <MineHeader arrow :title="pageName" />
    <div v-if="tabList.length>0" class="floor-tabs">
      <div
        v-for="(item,i) in tabList"
        :key="i"
        :class="['tab-item',{'active':item.id===activeFloorId}]"
        @click="clickTabHande(item)"
      >{{ item.name }}</div>
      <div v-if="tabList.length>3" class="tab-more" @click="showPop=true">
        <div class="arrow">
          <svg-icon icon-class="xiangxia" />
        </div>
      </div>
    </div>
    <div class="page-content" :class="{'no-anchor':tabList.length===0}">
      <List
        ref="list"
        :finished.sync="finished"
        :reset-fun="resetData"
        :load="load"
        :refresh="load"
      >
        <van-index-bar slot="list" ref="indexBar" :sticky-offset-top="104" :index-list="barIndexList" @change="handleBarChange">
          <div v-for="(floor,index) in floorList" :key="index">
            <van-index-anchor :index="floor.id" />
            <div class="floor-list">
              <template v-if="floor.type==='define_page_picture'">
                <ContentItem
                  v-for="(g,i) in floor.picDetailList"
                  :key="i"
                  :src="g.pic"
                  :name="g.name"
                  :one-column="floor.layOut==='oneColumn'"
                  :host="floorPicPrefix"
                  @click="clickPictureHandle(g)"
                />
              </template>
              <template v-if="floor.type==='define_page_product'">
                <ContentItem
                  v-for="(g,i) in floor.productDetailList"
                  :key="i"
                  :src="g.picUrl"
                  :name="g.skuName"
                  :price="g.price"
                  is-product
                  :host="proPicPrefix"
                  @click="clickProductHandle(g)"
                />
              </template>
            </div>
          </div>
        </van-index-bar>

      </List>
    </div>
    <Popup v-model="showPop" :show-confirm-button="false" :show-cancel-button="false" position="bottom">
      <div class="pop-content">
        <div class="pop-tab-list">
          <div
            v-for="(item,i) in tabList"
            :key="i"
            :class="['tab-item',{'active':item.id===activeFloorId}]"
            @click="clickTabHande(item)"
          >{{ item.name }}</div>
        </div>
      </div>
    </Popup>
  </div>
</template>

<script>
import MineHeader from '@/components/MineHeader'
import { getFullDefinePageById, saveDefinePageBrowsingHistory } from '@/apis/index'
import ContentItem from './ContentItem'
import Popup from '@/components/Popup'
import List from '@/components/PageList'
export default {
  name: 'CustomPage',
  components: { List, MineHeader, ContentItem, Popup },
  filters: {},
  mixins: [],
  data() {
    return {
      pageId: this.$route.params.id,
      pageName: '',
      floorList: [],
      activeFloorId: '',
      floorPicPrefix: process.env.VUE_APP_STATIC,
      proPicPrefix: process.env.VUE_APP_GCENTER_STATIC,
      showPop: false,
      list: [],
      finished: false,
      brownHistoryId: ''
    }
  },

  computed: {
    tabList() {
      const list = this.floorList.filter(v => [1, '1'].includes(v.isAnchor))
      return list
    },
    barIndexList() {
      return this.floorList.map(v => {
        return v.id
      })
    }
  },

  created() {
    /* if (this.pageId) {
      this.getContent(this.pageId)
    } */
  },
  activated() {},

  mounted() {},
  beforeRouteLeave(to, from, next) {
    const names = ['HomeIndex', 'GoodsIndex', 'GoodsThreeNavList']
    if (names.includes(to.name)) {
      this.$removeKeepAliveCache(this)
    }
    next()
  },
  methods: {
    resetPageData() {
      if (this.$refs.list) {
        this.$refs.list.resetPageData()
      }
    },
    resetData() {
      this.floorList = []
    },
    async load(page, rows) {
      return getFullDefinePageById(this.pageId).then(res => {
        this.pageName = res.data ? res.data.name || '' : ''
        this.floorList = res.data ? res.data.v2FloorList || [] : []
        if (this.floorList.length > 0) {
          this.activeFloorId = this.floorList[0].id
        }
        this.finished = true
        if (this.brownHistoryId !== this.pageId) {
          this.setBrowsingHistory()
        }
      })
    },

    // 保存浏览记录
    setBrowsingHistory() {
      const definePageId = this.pageId
      const definePageName = this.pageName
      if (!definePageId) {
        return
      }
      const params = { definePageId, definePageName }
      saveDefinePageBrowsingHistory(params).then(res => {
        this.brownHistoryId = definePageId
      })
    },

    getContent(id) {
      getFullDefinePageById(id).then(res => {
        this.pageName = res.data ? res.data.name || '' : ''
        this.floorList = res.data ? res.data.v2FloorList || [] : []
        if (this.floorList.length > 0) {
          this.activeFloorId = this.floorList[0].id
        }
        this.finished = true
      })
    },
    clickTabHande(d) {
      this.activeFloorId = d.id
      this.$refs.indexBar.scrollTo(this.activeFloorId)
    },
    handleBarChange(id) {
      this.activeFloorId = id
    },
    clickPictureHandle(g) {
      this.$gotoPage(g, this.$router)
    },
    clickProductHandle(g) {
      const skuId = g.skuId
      const spuId = g.spuId
      this.$router.push({
        name: 'FinishedDetail',
        params: { spuId, skuId }
      })
    }
  }
}

</script>
<style lang='less' scoped>
/deep/ .more-close{
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.08);
}
.custom-page{
  padding-top:44PX;
  padding-bottom: 16px;
}
.floor-tabs{
  position: fixed;
  z-index: 99;
  left: 0;
  top:44PX;
  width: 100%;
  height: 60PX;
  padding: 16PX 0 ;
  box-sizing: border-box;
  overflow: hidden;
  background: #FFFF;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  .tab-more{
    position: fixed;
    z-index: 100;
    right: 0;
    top: 44PX;
    margin-top: 13PX;
    width: 49px;
    height: 34PX;
    background: linear-gradient(90deg, rgba(255,255,255,0.81) 0%, #FFFFFF 100%);
    filter: blur(0px);
    display: flex;
    align-items: center;
    justify-content: center;
    .arrow{
      width: 20px;
      height: 20px;
      background: #F5F5F5;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      .svg-icon{
        font-size: 14px;
        width: 14px;
        height: 14px;
      }
    }
  }
}
.tab-item{
  margin-left: 12px;
  display: inline-block;
  padding: 0 12px;
  height: 28PX;
  line-height: 28PX;
  background: #FAFAFA;
  border-radius: 13px;
  color: #999999;
  font-size: 12px;
  white-space:nowrap;
  &.active{
    color: #333333;
    font-weight: bold;
    font-size: 14px;
    background: #F5F5F5;
  }
}
.pop-content{
  min-height: 250px;
  .pop-tab-list{
    display: flex;
    flex-wrap: wrap;
    .tab-item{
      margin-bottom: 20px;
    }
  }
}
.page-content{
  padding:0 16px;
  margin-top:60PX;
  &.no-anchor{
    margin-top: 0;
  }
  .floor-list{
    display: flex;
    flex-wrap: wrap;
  }
}
/deep/ .van-index-anchor{
  // display: none;
  height: 1px !important;
  visibility: hidden;
}
/deep/ .van-index-bar__sidebar{
  display: none;
}
</style>
